<template>
  <div>
    <div @dblclick="playmusic" class="music-info">
      <img class="musicpic" @click.stop="playmusic" :src="musicIcon + '?param=50y50'" alt />
      <div class="content">
        <div class="musicname">{{musicName}}</div>

        <div class="authors">
          <div
            @click="artistDetail(item.id)"
            v-for="(item,index) of musicauthor"
            class="author"
            :key="index+'name'"
          >{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "music-item",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    currentMusic: {
      require: true,
    },
  },
  data () {
    //这里存放数据
    return {};
  },
  //计算属性 类似于data概念
  computed: {
    musicIcon () {
      if (this.currentMusic) {
        return this.currentMusic.picUrl;
      } else {
        return "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
      }
    },
    musicName () {
      if (this.currentMusic) {
        return this.currentMusic.name;
      } else {
        return "未知歌曲";
      }
    },
    // 获取音乐作者
    musicauthor () {
      if (this.currentMusic) {
        let name = [];
        this.currentMusic.song.artists.forEach((element) => {
          name.push(element);
        });
        return name;
        // if (this.currentMusic.song.artists.length == 1) {
        //   return this.currentMusic.song.artists[0].name;
        // } else if (this.currentMusic.song.artists.length > 1) {
        //   for (
        //     let index = 0;
        //     index < this.currentMusic.song.artists.length;
        //     index++
        //   ) {
        //     const element = this.currentMusic.song.artists[index].name;
        //     if (name == "") {
        //       name = name + "" + element;
        //     } else {
        //       name = name + "/" + element;
        //     }
        //   }
        //   return name;
        // }
      }
      return "作者";
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    playmusic () {
      // console.log(this.currentMusic);
      // 把播放状态转为正在播放
      this.$store.state.musicisPlay = true;
      // 最新歌曲的格式不一样，封装必要信息进行传递
      let Musicformat = {
        id: this.currentMusic.id,
        name: this.currentMusic.name,
        ar: this.currentMusic.song.artists,
        al: this.currentMusic.song.album,
        dt: this.currentMusic.song.duration,
        mv: this.currentMusic.song.mvid,
      };

      // 提交数据到vuex，通过vuex把数据传递给播放组件
      this.$store.dispatch("getMusicDetail", Musicformat);
      this.$emit("addPlaylist", this.currentMusic);
    },
    artistDetail (id) {
      this.$router.push({ name: "artistAccount", query: { id } });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
// 歌曲信息栏位
.music-info {
  margin-top: 15px;
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
  .musicpic {
    flex-shrink: 0;
    cursor: pointer;
    height: 50px;
    width: 50px;
    border-radius: 5px;
  }
  .content {
    margin-left: 10px;
    max-width: 300px;
    .musicname {
      color: #373737;
      width: 300px;
      cursor: default;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .authors {
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .author {
      cursor: pointer;
      display: inline;
      color: #777777;
    }
    .author:hover {
      color: #5a5a5a;
    }
  }
}
.music-info:hover {
  background-color: #e7e3e3;
}
</style>